<template>
  <div>
    <el-form :inline="true" :disabled="disabled">
      <el-form-item label="一级分类">
        <!-- select后期收集什么数据,要看option当中的value,言外之意就是v-model收集的就是选中的option的value值
        option的value写什么值,要看你自己后期收集什么东西?**********************
        
        -->
        <el-select v-model="category1Id" placeholder="请选择" @change="handlerCategory1">
          <!-- option 必须有value属性-->
          <!--  -->
          <el-option :label="c1.name" :value="c1.id" v-for="c1 in category1List" :key="c1.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="二级分类">
        <el-select v-model="category2Id" placeholder="请选择" @change="handlerCategory2">
          <el-option :label="c2.name" :value="c2.id" v-for="c2 in category2List" :key="c2.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="三级分类">
        <el-select v-model="category3Id" placeholder="请选择">
          <el-option :label="c3.name" :value="c3.id" v-for="c3 in category3List" :key="c3.id" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { storeToRefs } from "pinia";
export default defineComponent({
  name: "CategorySelector", //组件名称
});
</script>
<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import { useCategoryStore } from "@/stores/category";

// 这个是ts的写法
// props接收的泛型写法
// 应用场景:如果用的ts + Vue3去做项目
// 那么defineProps必须要使用泛型写法,才能去接受自定义的类型
// 如果不用泛型写法可以接受内置类型数据,自定义类型数据接收的时候无法去类型限定
const props = defineProps<{
  disabled: boolean;
}>();

// 下面是js的写法
// const props1 = defineProps({
//   disabled: AttrData,
// });

const categoryStore = useCategoryStore();

// vue3组件当中获取pinia的数据,我们使用下面两种好用的方法
// 其实直接使用store.xxx是可以拿数据,而且页是响应式的.但是写起来麻烦

// 1\可以使用计算属性
// const category1List = computed(() => {
//   return categoryStore.category1List
// })
// 2\可以去解构(必须使用storeToRefs),否则失去响应式
const {
  category1List,
  category1Id,
  category2List,
  category2Id,
  category3List,
  category3Id,
} = storeToRefs(categoryStore);

// 挂载完成获取1级分类列表
onMounted(() => {
  categoryStore.getCategory1List();
});

// 选中1级去获取2级
const handlerCategory1 = (category1Id: number) => {
  // 当select发生改变的时候就会调用这个change事件的回调,默认传递选中的option的value,也就是选中的一级分类id
  // console.log(category1Id);
  // 我们使用v-model已经把选中的id值保存到pinia了,所以这个数据我们不用
  categoryStore.getCategory2List();
};

// 选中2级去获取3级
const handlerCategory2 = () => {
  categoryStore.getCategory3List();
};
</script>

<style lang="scss" scoped></style>